<template>
	<view class="tab-menu">
		<view class="item" @click="onTapMenu(0)">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-home-active.png" mode="widthFix" v-if="current === 0"></image>
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-home.png" mode="widthFix" v-else></image>
      <text :class="{active: current === 0}">首页</text>
    </view>
    <view class="item" @click="onTapMenu(1)">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-shop-active.png" mode="widthFix" v-if="current === 1"></image>
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-shop.png" mode="widthFix" v-else></image>
      <text :class="{active: current === 1}">店铺</text>
    </view>
    <view class="item" @click="onTapMenu(2)">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-order-active.png" mode="widthFix" v-if="current === 2"></image>
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-order.png" mode="widthFix" v-else></image>
      <text :class="{active: current === 2}">订单</text>
    </view>
    <view class="item" @click="onTapMenu(3)">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/ion-user-active.png" mode="widthFix" v-if="current === 3"></image>
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/ion-user.png" mode="widthFix" v-else></image>
      <text :class="{active: current === 3}">我的</text>
    </view>
	</view>
</template>

<script>
	export default {
    name: 'tabMenu',
    props: {
      current: {
        type: Number,
        value: 0
      }
    },
		data() {
			return {
				
			}
		},
    methods: {
      onTapMenu (index) {
        const urls = [
          '/pages/index/index',
          '/pages/shopList/shopList',
          '/pages/userOrderList/userOrderList',
          '/pages/userCenter/userCenter'
        ]
        console.log('切换菜单栏', index)
        uni.redirectTo({
          url: urls[index]
        })
      }
    }
	}
</script>

<style lang="scss">
.tab-menu {
  background-color: #FFFFFF;
  height: 100rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: fixed;
  border-top: #EFEFEF 1rpx solid;
  bottom: 0;
  left: 0;
  right: 0;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image {
      width: 30rpx;
      height: auto;
    }
    text {
      padding-top: 5rpx;
      color: #666666;
      font-size: 24rpx;
      &.active {
        color: #FF4A4A;
      }
    } 
  }
}
</style>
